var myDate = new Date();
$(function(){
  $("#span_qorder").hide();
  var startDate=null;
  var endDate=null;
  $("#start").click(function(){
    if($("#end").val()!=""){
      endDate="'"+$("#end").val()+"'";
    }
    $('#start').datepicker('setEndDate', endDate);
  });
  //当$("#end")的值不为空时$("#start")的endDate为$("#end")的值
  $("#end").click(function(){
    if($("#start").val()!=""){
      startDate="'"+$("#start").val()+"'";
    }
    //console.log(startDate);
    $('#end').datepicker('setStartDate', startDate);
  });

  $("#start").datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    orientation : 'top',
    todayHighlight:true
  });

  $("#end").datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    orientation : 'top',
    todayHighlight:true
  });


  $('#start').val(myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+1);
  $('#end').val(myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate());
});

$(function() {
  /**
   * 表格
   * @type {string}
   */
  $.jgrid.defaults.styleUI = "Bootstrap";

  $("#table_list").jqGrid({
    url: '',
    datatype: "json",                                              //请求的数据类型
    mtype: "POST",                                                  //请求类型
    height: 300,                                                   //设置高度
    autowidth: true,                                               //自动匹配宽度
    shrinkToFit: true,
    rowNum: 10,                                                    //每页显示记录数
    rowList: [10, 20, 30],                                       //分页选项，可以下拉选择每页显示记录数
    colNames: ["ID", "问卷ID", "填写时间", "用户名", "用户终端"],                //数据列名称（数组）
    //数据列各参数信息设置
    colModel: [{name: "id", index: "id", width: 30},
      {name: "qid", index: "qid", width: 30},
      {name: "ctimeToFullString", index: "ctimeToFullString", width: 100, },
      {name: "username", index: "username", width: 50,},
      {name: "useragent", index: "useragent", width: 50,},

    ],
    pager: "#pager_list",                                         //表格数据关联的分页条，html元素
    viewrecords: true,                                            //显示总记录数
    //这是一个数组，用于设置jqGrid将要向Server传递的参数名称
    jsonReader: {
      id: "id",                                           //相当于设置主键
      root: "dataList",                                        //Json数据
      records: "record",                                      //总记录数
      repeatitems: false
    },
    multiselectWidth: 25,                                          //设置多选列宽度
    multiselect: false,                                            //可多选，出现多选框
    gridview: true,                                                 //加速显示
    sortable: true,                                                //可以排序
    sortname: 'ctime',
    sortorder: "desc",                                //可以排序
    hidegrid: false,

    ondblClickRow:function(id){//双击行触发事件
        var url=$(path).val()+"/Question/getAnser?id="+id;
        window.open(url);

    }

  });

  /*
  * 问卷下拉框
  *
  * */
var qlist;
  var options="";
  $.post($(path).val() + "/Question/getQuestionnaireList",{},function(data){
    var list=JSON.parse(data);
    qlist=list;
    var option="";
    $.each(list,function(i,o){
       option+="<option value='"+o.id+"' qnum='"+o.qnum+"'>"+o.title+"("+o.id+")"+"</option>";
    })
    options=option;
    $("#title").html(option);
    getQnum();
  });

  /*
  *   当问卷select   改变时，显示  题数
  * */
  $("#title").change(getQnum);

  /*
  * 输入问卷id   select显示问卷
  * */
  $("#qid").bind("input",function(){
    var id=$(this).val();
    var list=qlist;
    var option="";
    if(id==""){
      option=options;
    }
    else {
      $.each(list, function (i, o) {
        if (id == o.id) {
          option += "<option value='" + o.id + "'  qnum='"+o.qnum+"'>"+o.title+"("+o.id+")"+"</option>";
          return false;
        }
      })
    }

    $("#title").html(option);
    getQnum();
  })
  $(window).bind("resize", function () {
    var width = $(".jqGrid_wrapper").width();
    $("#table_list").setGridWidth(width);
  });
  /**
   * 提交按钮
   */
  $("#queryButton").click(function () {
    var qid = $("#title").val();
    var start = $("#start").val();
    var qorder=$("#selectQorder").val();
    if(qorder==null||qorder=="") qorder=1;
    var end = $("#end").val();
    if(end==""||start==""){
    if(end=="")
    {
      end=start;
    }
    else if( start=="")
    {
      start=end;
    }
    }
    if(end!=""&&start!=""){
      start+=" 00:00:00";
      end+=" 23:59:59";
    }
    /*
    * 请求表格数据*/
    $("#table_list").jqGrid('setGridParam', {
      url: $(path).val() + '/Question/getAnserView',
      dataType: 'json',
      postData: {
        qid: qid,
        start: start,
        end: end,
      },
      page: 1
    }).trigger('reloadGrid'); //重新载入
/*
* 请求图表数据
* */
    $.post($(path).val() + '/Question/getAnserBar',{
      qid:qid,
      qorder:qorder
    },function(data){
      var  questionAnser=JSON.parse(data);
      console.info(questionAnser);
      getChartData(questionAnser);
    });

   /* var dataList=[{"NUM":1,"URL":"22"}];
    getChartData(dataList);*/

  });


  // 点击切换 柱形图<====>表格
  $("#view_bar_span").click(function(){
        $("#table1").toggle("slow");
        $("#table2").toggle("slow");
        $("#span_dclik").toggle("slow");
        $("#span_qorder").toggle("slow");
       /* scrollDown();  //  滚动条到底部*/
        if($("#view_bar_span").text()=="点击查看柱形图"){
          $("#view_bar_span").html("<i class='fa fa-hand-o-right'style='margin-right:5px'></i>点击查看表格");
        }
        else{
          $("#view_bar_span").html("<i class='fa fa-hand-o-right'style='margin-right:5px'></i>点击查看柱形图");
        }
      });



  /***********************************
   * 柱形图
   **********************************/
  var myChart = echarts.init(document.getElementById('bar_bar'));
  var option = {
    title: {
      text: '',
      subtext: ''
    },
    xAxis : [
      {
        axisLabel: {
         // rotate: 40,
          font:console,
        },
        show:true,
        // data : dataAxis,
      }
    ],
    //标签
    tooltip : {
      trigger: 'axis',
      axisPointer : {
        type : 'shadow'
      }
    },
    /* grid: {
     x: 40,
     x2: 20,
     y2: 100,
     },*/
    yAxis : [
      {
        type : 'value'
      }
    ],
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [

      {
        name:'选择数',
        type: 'bar',
        //   data: data
      }

    ]
  };


  function   getChartData(data){
    $("#bar_text").text("");
    var values = [];//value 数组
    var   names=[];  //name  数组
    if(data==null||data.question==null){
      option.title.text="没有该题的任何数据(无人答卷)";
      $("#bar_text").append("<div  style='font-size: 50px; font-style:inherit;text-align: center;'>没有该题的任何数据(无人答卷)</div>");
      $("#bar_bar").hide("fast");
      return;
    }

    var title=data.question.typeTo+" : "+data.question.order+"."+data.question.title;
    var context=data.question.context;
    //=============================单选多选==============================/////
    if(data.question.type=="1"||data.question.type=="2"){
      $("#bar_bar").show("slow");
      context=context.substring(2,context.length-2);
      context=eval(context);
      title+="-----选项 ( "
      $.each(context,function(i,o){
        title+=(i+1)+"."+o+" ";
        names.push((i+1)+"."+o);
        values.push(0);
      })
      title+=" )"
      //============================数据===============================/////
      var anserList=data.anserList;
      $.each(anserList,function(i,o){
        var result =eval(o.result);
        $.each(result,function(j,r){
         values[r-1]=values[r-1]+1;
        })
      })

    }

    //============================填空===============================/////
    else if(data.question.type=="5"||data.question.type=="6"){

      context=context.substring(4,context.length-4);
      title+=context;
      $("#bar_text").append("<div class='input-group-addon' style='font-size: 20px; font-style:inherit'>"+title+"</div>");
      var anserList=data.anserList;
      var div="<div  style='font-size: 16px; font-style:inherit;width: auto'>"
      $.each(anserList,function(i,o){
        var result =eval(o.result);

        div+="<li style='list-style:none'>"+(i+1)+"----"
        $.each(result,function(j,r){
          div+="<div class='input-group-addon' style='width:300px; max-width: 300px;overflow:auto;display:inline-block !important; display:inline;font-size: 16px; font-style:inherit;margin-right: 20px;' >"+r+"</div>";
        })
        div+="</li>"
      })
      $("#bar_text").append(div);
      $("#bar_bar").hide("fast");
      return ;
    }
//============================描述题===============================/////
    else if(data.question.type=="7"){

      $("#bar_text").append("<div class='input-group-addon' style='font-size: 20px; font-style:inherit'>"+title+"</div>");
      var anserList=data.anserList;
      var div="<div  style='font-size: 16px; font-style:inherit;width: auto'>"
      $.each(anserList,function(i,o){
        var result =eval(o.result);
        $.each(result,function(j,r){
          if(r=="") return false;
          div+="<textarea  style='width:300px; max-width: 300px;overflow:auto;font-size: 16px; font-style:inherit;margin-right: 20px;' >"+r+"</textarea>";
        })
      })
      $("#bar_text").append(div);
      $("#bar_bar").hide("fast");
      return ;
    }
    //============================重构柱形图===============================/////
    option.title.text=title;
    if(values.length==0){values=[""],names=[""]}
    option.series[0].data=values;   //y轴
    option.xAxis[0].data=names;  //X轴
    myChart.setOption(option,true);

  }


  /**
   * 时间转换  时间戳--》 yyyy-mm-dd
   * @param cellValue
   * @returns {string}
   */
  function ctime(cellValue){
    var date =new Date(cellValue);
    var year=date.getYear()+1900;
    var month=date.getMonth()+1;
    var data=date.getDate();
    var h=date.getHours();
    var m=date.getMinutes();
    var s=date.getSeconds();
    return year+"-"+month+"-"+data+" " +h+":"+m+":"+s;
  }


  function getQnum(){
    var qnum=$("#title option:selected").attr("qnum");
    $("#selectQorder").clear;
    var options="";
    if(qnum=="0"||qnum==null||qnum==""){
      options+="<option value='" + 0 + "' >该问卷没有题目</option>";
    }
    for(var j=1;j<=qnum;j++) {
      options+="<option value='" + j + "' >"+j+"</option>"
    }
    $("#selectQorder").html(options);

  }



});